{% extends 'encyclopedia/base.html' %}

{% block title %}{{ category.name }} - 配件分类详情 - 相机百科{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <h2 class="card-title mb-0">{{ category.name }}</h2>
        </div>
        <div class="card-body">
            {% if category.description %}
            <p class="card-text">{{ category.description }}</p>
            {% endif %}
            <p class="card-text text-muted">该分类下共有 {{ accessories.count }} 个配件</p>
        </div>
    </div>
    
    <!-- 配件列表 -->
    <div class="row">
        {% if accessories %}
            {% for accessory in accessories %}
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">{{ accessory.title }}</h5>
                        <h6 class="card-subtitle mb-2 text-muted">{{ accessory.brand }}</h6>
                        {% if accessory.price_range %}
                        <p class="card-text text-success">价格区间：{{ accessory.price_range }}</p>
                        {% endif %}
                        <p class="card-text">{{ accessory.content|truncatechars:100 }}</p>
                        <a href="{% url 'encyclopedia:accessory_detail' accessory.pk %}" class="btn btn-primary btn-sm">查看详情</a>
                    </div>
                    <div class="card-footer text-muted text-sm">
                        创建于: {{ accessory.created_at|date:"Y-m-d" }}
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
        <div class="col-12">
            <div class="alert alert-info text-center" role="alert">
                该分类下暂无配件数据
            </div>
        </div>
        {% endif %}
    </div>
    
    <div class="mt-4 text-center">
        <a href="{% url 'encyclopedia:accessory_category_list' %}" class="btn btn-secondary">返回分类列表</a>
        <a href="{% url 'encyclopedia:accessory_list' %}" class="btn btn-primary ml-2">查看所有配件</a>
    </div>
</div>
{% endblock %}